<template>
  <div class="animal-list">
    <el-card class="page-card" shadow="hover">
      <!-- 页面标题 -->
      <div class="header">
        <div class="header-content">
          <h2 class="page-title">
            <el-icon><Files /></el-icon>
            <span>动物信息</span>
          </h2>
          <div class="subtitle">浏览待领养的动物信息</div>
        </div>
      </div>

      <!-- 筛选条件 -->
      <div class="filter-container">
        <el-row :gutter="16">
          <el-col :span="6">
            <el-input
              v-model="filters.keyword"
              placeholder="搜索动物名称"
              clearable
              prefix-icon="Search"
            />
          </el-col>
          <el-col :span="4">
            <el-select v-model="filters.species" placeholder="种类" clearable>
              <el-option label="全部种类" value="" />
              <el-option label="猫" value="猫" />
              <el-option label="狗" value="狗" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="filters.gender" placeholder="性别" clearable>
              <el-option label="全部性别" value="" />
              <el-option label="公" value="公" />
              <el-option label="母" value="母" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="filters.status" placeholder="状态" clearable>
              <el-option label="全部状态" value="" />
              <el-option label="待救助" value="0" />
              <el-option label="救助中" value="1" />
              <el-option label="待领养" value="2" />
              <el-option label="已领养" value="3" />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 动物列表 -->
      <el-row :gutter="20" v-if="filteredAnimals.length > 0">
        <el-col :span="6" v-for="animal in filteredAnimals" :key="animal.id">
          <el-card 
            shadow="hover" 
            class="animal-card" 
            @click="goDetail(animal.id)"
            :body-style="{ padding: '0' }"
          >
            <div class="animal-image-wrapper">
              <img :src="animal.photo" alt="animal" class="animal-img" />
              <div class="status-badge">
                <el-tag 
                  :type="getStatusType(animal.status)" 
                  size="small"
                  effect="dark"
                >
                  {{ getStatusText(animal.status) }}
                </el-tag>
              </div>
            </div>
            <div class="animal-info">
              <h3 class="animal-name">{{ animal.name || '未命名' }}</h3>
              <div class="animal-details">
                <div class="detail-item">
                  <el-icon><Files /></el-icon>
                  <span>{{ animal.species }}</span>
                </div>
                <div class="detail-item">
                  <el-icon><User /></el-icon>
                  <span>{{ animal.gender }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 空状态 -->
      <el-empty v-else description="暂无动物信息" :image-size="200" />
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { Files, User, Search, Refresh } from '@element-plus/icons-vue';

export default {
  components: {
    Files,
    User,
    Search,
    Refresh
  },
  data() {
    return {
      animals: [],
      filters: {
        keyword: '',
        species: '',
        gender: '',
        status: ''
      }
    };
  },
  computed: {
    filteredAnimals() {
      let result = this.animals;
      
      // 关键词筛选
      if (this.filters.keyword) {
        const keyword = this.filters.keyword.toLowerCase();
        result = result.filter(animal => 
          (animal.name || '').toLowerCase().includes(keyword)
        );
      }
      
      // 种类筛选
      if (this.filters.species) {
        result = result.filter(animal => animal.species === this.filters.species);
      }
      
      // 性别筛选
      if (this.filters.gender) {
        result = result.filter(animal => animal.gender === this.filters.gender);
      }
      
      // 状态筛选
      if (this.filters.status !== '') {
        result = result.filter(animal => String(animal.status) === this.filters.status);
      }
      
      return result;
    }
  },
  async mounted() {
    const res = await axios.get("http://localhost:8080/api/animal/listAll");
    if (res.data.code === 200) {
      this.animals = res.data.data;
    }
  },
  methods: {
    getStatusText(status) {
      return [ "待领养", "已领养","审核中"][status];
    },
    getStatusType(status) {
      const types = ['warning', 'success', 'info'];
      return types[status] || 'info';
    },
    handleSearch() {
      // 筛选逻辑在 computed 中处理
      this.$message.success('搜索完成');
    },
    handleReset() {
      this.filters = {
        keyword: '',
        species: '',
        gender: '',
        status: ''
      };
      this.$message.success('已重置筛选条件');
    },
    goDetail(id) {
      this.$router.push(`/user/animal/${id}`);
    },
  },
};
</script>

<style scoped>
.animal-list {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100%;
}

.page-card {
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.header-content {
  flex: 1;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.page-title .el-icon {
  font-size: 28px;
  color: #409eff;
}

.subtitle {
  color: #909399;
  font-size: 14px;
  margin-left: 40px;
}

/* 筛选容器 */
.filter-container {
  margin-bottom: 30px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
}

.filter-container .el-input,
.filter-container .el-select {
  width: 100%;
}

.filter-container .el-button {
  margin-left: 8px;
}

/* 动物卡片 */
.animal-card {
  margin-bottom: 20px;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.animal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.animal-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 75%;
  overflow: hidden;
}

.animal-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.animal-card:hover .animal-img {
  transform: scale(1.05);
}

.status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

.animal-info {
  padding: 16px;
  text-align: left;
}

.animal-name {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.animal-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
}

.detail-item .el-icon {
  font-size: 16px;
  color: #909399;
}

/* 空状态 */
:deep(.el-empty) {
  padding: 60px 0;
}

/* 响应式 */
@media (max-width: 1200px) {
  .filter-container .el-col {
    margin-bottom: 12px;
  }
  
  .animal-list .el-col {
    width: 50%;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .animal-list {
    padding: 10px;
  }
  
  .page-card {
    padding: 20px;
  }
  
  .animal-list .el-col {
    width: 100%;
  }
  
  .filter-container .el-col {
    width: 100% !important;
  }
}
</style>
